<template>
   <div ref="scrollContent" style="width: 100%;height: 100%;">
      <el-scrollbar ref="scrollbar" :style="styleObject">
         <el-row :gutter="12" style="width: 100% ;">
            <el-col :span="8">
               <el-card style="width: 100% ;height:200px;">
                  <template #header>
                     <div class="card-header" style="background-color:coral;">
                        <span>我的持仓</span>
                     </div>
                  </template>

                  dddd
               </el-card>
            </el-col>

            <el-col :span="8">
               <el-card style="width: 100% ;height:200px;">
                  <template #header>
                     <div class="card-header" style="background-color:cornflowerblue;">
                        <span>指数追踪</span>
                     </div>
                  </template>
                </el-card>
            </el-col>
            <el-col :span="8">
               <el-card style="width: 100% ;height:200px;">
                  <template #header>
                     <div class="card-header" style="background-color:cadetblue;">
                        <span>昨日成交</span>
                     </div>
                  </template>

               </el-card>
            </el-col>
         </el-row>

         <el-row :gutter="12" style="width: 100% ;">
            <el-col :span="12">
               <el-card style="width: 100% ;height:350px;">
                  <template #header>
                     <div class="card-header" style="background-color:goldenrod;">
                        <span>成交量</span>
                     </div>
                  </template>

               </el-card>
            </el-col>

            <el-col :span="12"> <el-card style="width: 100% ;height:350px;">
                  <template #header>
                     <div class="card-header" style="background-color:azure;">
                        <span>北向资金</span>
                     </div>
                  </template>
            
               </el-card></el-col>

         </el-row>
      </el-scrollbar>
   </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, nextTick } from 'vue';

const scrollbar = ref(null);
const scrollContent = ref(null);
const styleObject = ref({ height: "300px" });


// 挂载时设置滚动条高度
onMounted(() => {
   nextTick(() => {
      setHeight();
   });

   window.addEventListener('resize', setHeight);
});


// 定义设置高度的方法
const setHeight = () => {
   const height = scrollContent.value.offsetHeight;
   styleObject.value.height = `${height}px`;
};

</script>

<style>
.el-card__header{
   padding: 0px;
}

.card-header {
   height: 18px;
   line-height: 18px;
   padding: 4px;
   margin: 0px;
   font-size: 12px;
   vertical-align: middle;
   font-weight: bold;
}

.card-header .el-icon{
   top: 4px;
}


 
 
.el-card {
   --el-card-border-radius: 4px;
   --el-card-padding: 10px;
   margin-bottom: 12px;
}

.el-card__body {
   padding: 5px;
}

.el-card__body p {
   height: 30px;
}
</style>